<template>
  <Card>
    <Form :model="articleForm" :label-width="80">
      <FormItem label="文章标题: ">
        <Input v-model="articleForm.title" placeholder="请输入标题"></Input>
      </FormItem>
      <FormItem label="文章类型: ">
        <RadioGroup v-model="articleForm.type">
          <Radio label="1">园区公告</Radio>
          <Radio label="2">园区政策</Radio>
          <Radio label="3">招商信息</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="文章内容: ">
        <tinymce-editor
          ref="editor"
          v-model="articleForm.text"
          :disabled="disabled"
        >
        </tinymce-editor>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="submitArticle">发布</Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
import { mapMutations } from 'vuex'
import TinymceEditor from '_c/tinymce-editor/tinymce-editor'
export default {
  components: {
    TinymceEditor
  },
  data () {
    return {
      articleForm: {
        title: '',
        type: '1',
        coverImageUrl: [],
        text: '',
        parkId: '',
        publisherId: '',
        imageUrls: []
      },
      disabled: false
    }
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    submitArticle () {
      this.articleForm.parkId = this.$store.state.user.parkId
      this.articleForm.publisherId = this.$store.state.user.publisherId
      console.log(this.articleForm)
      this.$Axios.request({
        method: 'post',
        url: '/article/add',
        data: this.articleForm
      }).then(res => {
        const resData = res.data
        this.closeTag({
          name: 'add_article'
        })
        this.$router.push({
          name: 'article_list'
        })
      })
    }
  }
}
</script>

<style scoped>
.article {
  margin-left: 15%;
  margin-right: 15%;
}

.article .title {
  padding-bottom: 10px;
  height: 50px;
}

.article .title :nth-last-child(1) {
  font-size: 30px !important;
  font-weight: border;
}
</style>
